<template>
    <h1>客户地址管理</h1>
    <el-table :data="pageInfo.list"
                stripe
                style="width:100%"
                border
                :header-cell-style="{textAlign:'center'}"
                :cell-style="{textAlign:'center'}">
        <el-table-column prop="userId"
                        label="用户Id"></el-table-column>
        <el-table-column prop="name"
                        label="收货人"></el-table-column>
        <el-table-column prop="phone"
                        label="联系方式"
                        ></el-table-column>
        <el-table-column prop="receiceDetailAddress"
                        label="收货地址"
                        width="400px"></el-table-column>
        <el-table-column prop="defaultStatus"
                        label="默认状态"
                        width="100px">
            <template #default="scope">
                <el-tag class="ml-2"
                        v-if="scope.row.defaultStatus == 0"
                        effect="dark"
                        type="danger">非默认</el-tag>
                <el-tag class="ml-2"
                        v-if="scope.row.defaultStatus == 1"
                        effect="dark"
                        type="">默认</el-tag>
            </template>
        </el-table-column>                           
        <el-table-column label="操作"
                        width="350px">
        <template #default="scope">
            <el-button size="small"
                    type="primary"
                    v-if="scope.row.defaultStatus == 0"
                    @click="changeDefaultStatus(scope)">设置为默认地址</el-button>
            <el-button size="small"
                    type="primary"
                    @click="detail(scope)">详细信息</el-button>
        </template>
        </el-table-column>
    </el-table>
    <el-pagination class="el-pagination"
                    layout="prev,pager,next,total,jumper,sizes"
                    :total="pageInfo.total"
                    v-model:current-page="pageNum"
                    v-model:page-size="pageSize"
                    :page-sizes="[3,5,10,20]"
                    background
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange">
    </el-pagination>

    <el-drawer v-model="drawer" title="title—useless" :with-header="false">
        <span><h4>地址详细信息</h4></span>
        <!-- {{addressInfo}} -->
        <el-divider/>
        <span>
            <el-descriptions
                class="margin-top"
                :column="3"
                :size="small"
                :style="blockMargin"
                border
            >
                <el-descriptions-item label="收货人">{{addressInfo.name}}</el-descriptions-item>
                <el-descriptions-item label="联系方式">{{addressInfo.phone}}</el-descriptions-item>
                <el-descriptions-item label="默认地址" v-if="addressInfo.defaultStatus == 0">非默认</el-descriptions-item>
                <el-descriptions-item label="默认地址" v-if="addressInfo.defaultStatus == 1">默认</el-descriptions-item>
                <el-descriptions-item label="详细地址" span="3">{{addressInfo.receiceDetailAddress}}</el-descriptions-item>
            </el-descriptions>
        </span>
    </el-drawer>
</template>

<script>
import {ref, getCurrentInstance} from 'vue'
export default {
    setup(){
        const {proxy} = getCurrentInstance();
        let pageNum = 1;//定义一个变量  number  {}对象 []list
        let pageSize = 5;
        const drawer = ref(false);

        const addressInfo = ref({});
        const pageInfo = ref(
            {
                total:0,
                pageNum:1,
                pageSize:5,
                size:0,
                startRow:0,
                endRow:0,
                pages:0,
                prePage:0,
                nextPage:0,
                isFirstPage:true,
                isLastPage:true,
                hasPreviousPage:false,
                hasNextPage:false,
                navigatePages:8,
                navigatepageNums:[],
                navigateFirstPage:0,
                navigateLastPage:0,
                list:[]
            }
        );//用ref定义的所有容器都必须使用.value得到它的值

        const getData = () => {
            proxy.$http.get(proxy.$url.UmsAddressControllerBaseUrl + '/getPaged',{params:{pageNum:pageNum,pageSize:pageSize}}).then((res) => {
                if(res.data.code == 2000){
                    pageInfo.value = res.data.data
                    pageNum = pageInfo.value.pageNum
                    pageSize = pageInfo.value.pageSize
                    for(let item of pageInfo.value.list){
                        item.receiceDetailAddress = item.province + item.city + item.region + item.detailAddress
                    }
                }
            })
        };

        const changeDefaultStatus = (scope) => {
            proxy.$http.get(proxy.$url.UmsAddressControllerBaseUrl + '/changeDefaultStatus',{params:{addressId:scope.row.id}}).then((res) => {
                if(res.data.code == 2000){
                    proxy.$message({
                        type: 'success',
                        message: '已设置为该用户默认地址'
                    });
                    getData()
                }
            })
        };

        const detail = (scope) => {
            addressInfo.value = {...scope.row}
            drawer.value = true;
        };

        const handleCurrentChange = () => {
            getData()
        };
        const handleSizeChange = () => {
            getData()
        };

        getData()
        return {
            pageNum,
            pageSize,
            pageInfo,
            addressInfo,
            drawer,

            getData,
            handleCurrentChange,
            handleSizeChange,
            changeDefaultStatus,
            detail,
        }
    }
}
</script>

<style scope>

</style>